import React, { useEffect, useState } from 'react'
import '@/style/contact.scss'
import Map from "./map";
function Contact() {
	const [activeIndex, setActiveIndex] = useState(0);
	const addressData = [
		{
			title: "河北涿州",
			address: "办公地址:河北省保定市涿州市高官庄镇解家楼村村北",
			tel: "联系电话：13911102112",
			email: "邮箱：120299424@qq.com",
		},
	];
	const changeTab = (item, index) => {
		setActiveIndex(index)
	};
	const href = window.location.href;
	const typeName = href.split('?type=') ? href.split('?type=')[1] : '';
	useEffect(() => {
		if (typeName) {
			scroll(typeName)
		}
		// 在组件加载时初始化地图
		const map = new window.AMap.Map('mapContainer', {
			zoom: 13, // 设置地图缩放级别
			center: [116.030281, 39.377374], // 设置地图中心点坐标
		});
		// 添加一个大头针（标记）
		const marker = new window.AMap.Marker({
			position: [116.030281, 39.377374], // 设置标记的位置
			map: map, // 设置标记所属的地图实例
		});

		// 使用Geolocation定位当前位置
		map.plugin('AMap.Geolocation', function () {
			var geolocation = new window.AMap.Geolocation({
				enableHighAccuracy: true, // 是否使用高精度定位，默认:true
				timeout: 10000,           // 超过10秒后停止定位，默认：无穷大
			});

			map.addControl(geolocation);

			geolocation.getCurrentPosition();
		});
	}, []);
	const scroll = (typeName) => {
		let element = document.getElementById(typeName)
		element.scrollIntoView({ block: 'center', behavior: 'smooth' })
	}


	return (
		<>
			<div className="contactBanner">
			</div> 
			<div className="contactBox">
				<div className="mainContent">
					<div className="boxTitle" id="contactUs">联系我们</div>
					<div className="contactContent flexSpaceBetween">
						<div className="contactAddress">
							{addressData.map((item, index) => {
								return (
									<div 
										className={["contactItem", activeIndex === index ? "active" : ''].join(" ")}
										key={index}
										onMouseEnter={changeTab.bind(null, item,index)}>
										<div className="contactItemTitle">
											{item.title}
										</div>
										{item.address && (
											<p>{item.address}</p>
										)}
										{item.tel && (
											<p>{item.tel}</p>
										)}
										{item.email && (
											<p>{item.email}</p>
										)}
									</div>
								)
							})}
						</div>
						<div className="mapBox">
						<div id="mapContainer" style={{ width: '100%', height: '400px' }} />
						</div>
					</div>

				</div> 
			</div> 
		</>
	)
}
 
export default Contact